<template>
  <div id="wlconfig" class="work-list-import-ref">
    <!-- v-loading="loading" -->
    <!-- 列表 -->
    <vxe-modal ref="vxeModal" title="信息配置" v-if="dialogVisible" v-model="dialogVisible" width="85vw" showFooter transfer show-zoom resize @show="DislogOpened" @close="dialogClosed" @zoom="vxwModalSizeChange">
      <template #title>
        <span class="text-bold">
          <span class="el-icon-d-arrow-left text-orange" style="cursor: pointer !important" v-if="showIndex === 2" @click="goBackForwordPage"></span>
          <span class="margin-left-xs">信息配置</span>
        </span>
      </template>
      <!-- 先展示列表 -->
      <div v-if="showIndex === 1">
        <vxe-toolbar perfect>
          <template #buttons>
            <vxe-input v-model="formSetting.searchValue" placeholder="关键字查询" @keyup.enter.native="openOtherConfigDialog">
              <template #suffix>
                <i class="vxe-icon-search my-green" @click="openOtherConfigDialog"></i>
              </template>
            </vxe-input>
            <vxe-button icon="vxe-icon-add" content="新增" @click="addNewWlConfig"></vxe-button>
            <vxe-button status="primary" icon="vxe-icon-save" content="保存" @click="saveWlConfig"></vxe-button>
            <vxe-button icon="vxe-icon-copy" content="设置默认" @click="setDefaultWlConfig"></vxe-button>
            <!--            <vxe-button status="success" icon="vxe-icon-copy" content="复制" @click="copyWlConfig"></vxe-button>
            <vxe-button status="warning" icon="vxe-icon-paste" content="粘贴" @click="pasteWlConfig"></vxe-button>-->
            <vxe-button status="danger" icon="vxe-icon-delete" content="删除" @click="deleteWlConfig"></vxe-button>
          </template>
        </vxe-toolbar>
      </div>
      <div :style="{
          height: vxeModalHeight > 0 ? 'calc(' + vxeModalHeight + 'px - 36px - 40px - 28px - 40px)' : 'calc(100vh - 232px - 1em - 0.25em)'
        }" v-if="showIndex === 1">
        <vxe-table ref="wlConfigComp" :data="tableListConfigs" show-header-overflow show-overflow style="width: 100%" :edit-config="{ trigger: 'click', mode: 'cell', showIcon: false }" v-loading="loadingObj.configListLoding" border height="auto" :row-config="{ isCurrent: true, isHover: true }">
          <vxe-column type="checkbox" width="26"></vxe-column>
          <vxe-column type="seq" width="30" align="left"></vxe-column>
          <vxe-column field="rptGroupName" title="报告单元" width="120"></vxe-column>
          <vxe-column field="code" title="编码" width="110" :edit-render="{ autofocus: '.vxe-input--inner' }">
            <template #edit="{ row }">
              <vxe-input v-model="row.code" placeholder="编码" />
            </template>
          </vxe-column>
          <vxe-column field="name" title="名称" width="180" :edit-render="{ autofocus: '.vxe-input--inner' }">
            <template #edit="{ row }">
              <vxe-input v-model="row.name" placeholder="名称" />
            </template>
          </vxe-column>
          <vxe-column field="displayOrder" title="顺序号" width="90" :edit-render="{ autofocus: '.vxe-input--inner' }">
            <template #edit="{ row }">
              <vxe-input v-model="row.displayOrder" placeholder="顺序号" />
            </template>
          </vxe-column>
          <vxe-column field="isDefault" title="系统默认" width="90" align="center">
            <template #default="{ row }">
              <span v-if="row.isDefault" class="text-blue text-bold">是</span>
              <span v-if="!row.isDefault" class="text-bold">×</span>
            </template>
          </vxe-column>
          <!--          <vxe-column field="isEnablePsetting" title="√" width="30" align="center">-->
          <!--            <template #default="{ row }">-->
          <!--              <vxe-checkbox v-model="row.isEnablePsetting" :checked-value=1 :unchecked-value=0></vxe-checkbox>-->
          <!--            </template>-->
          <!--          </vxe-column>-->
          <vxe-column field="patsPanelSize" title="病人信息栏宽度" width="120" :edit-render="{ autofocus: '.vxe-input--inner' }">
            <template #edit="{ row }">
              <vxe-input type="float" v-model="row.patsPanelSize" placeholder="病人信息栏宽度" />
            </template>
          </vxe-column>
          <!--          <vxe-column field="isEnableRsetting" title="√" width="30" align="center">
            <template #default="{ row }">
              <vxe-checkbox v-model="row.isEnableRsetting" :checked-value=1 :unchecked-value=0></vxe-checkbox>
            </template>
          </vxe-column>-->
          <vxe-column field="resultsPanelSize" title="检验结果栏宽度" width="120" :edit-render="{ autofocus: '.vxe-input--inner' }">
            <template #edit="{ row }">
              <vxe-input type="float" v-model="row.resultsPanelSize" placeholder="检验结果栏宽度" />
            </template>
          </vxe-column>
          <!--          <vxe-column field="isEnableWsetting" title="√" width="30" align="center">
            <template #default="{ row }">
              <vxe-checkbox v-model="row.isEnableWsetting" :checked-value=1 :unchecked-value=0></vxe-checkbox>
            </template>
          </vxe-column>-->
          <vxe-column field="workbenchPanelSize" title="标本列表栏宽度" width="120" :edit-render="{ autofocus: '.vxe-input--inner' }">
            <template #edit="{ row }">
              <vxe-input type="float" v-model="row.workbenchPanelSize" placeholder="标本列表栏宽度" />
            </template>
          </vxe-column>
          <vxe-column field="resultRowHeight" title="检验结果列表行高" width="120" :edit-render="{ autofocus: '.vxe-input--inner' }">
            <template #edit="{ row }">
              <vxe-input type="float" v-model="row.resultRowHeight" placeholder="检验结果列表行高" />
            </template>
          </vxe-column>
          <vxe-column field="wlRowHeight" title="标本列表行高" width="120" :edit-render="{ autofocus: '.vxe-input--inner' }">
            <template #edit="{ row }">
              <vxe-input type="float" v-model="row.wlRowHeight" placeholder="标本列表行高" />
            </template>
          </vxe-column>
          <vxe-column field="fontSize" title="字体大小" width="80" :edit-render="{ autofocus: '.vxe-input--inner' }">
            <template #default="{ row }">
              {{ formatCommon(fontList, row.fontSize) }}
            </template>
            <template #edit="{ row }">
              <vxe-select v-model="row.fontSize" transfer>
                <vxe-option v-for="item in fontList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
              </vxe-select>
            </template>
          </vxe-column>
          <vxe-column field="fontWeight" title="字体加粗" width="80" :edit-render="{ autofocus: '.vxe-input--inner' }">
            <template #default="{ row }">
              {{ formatCommon(fontWeightList, row.fontWeight) }}
            </template>
            <template #edit="{ row }">

              <vxe-select v-model="row.fontWeight" transfer>
                <vxe-option v-for="item in fontWeightList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
              </vxe-select>
            </template>
          </vxe-column>
          <vxe-column field="description" title="描述" min-width="180" :edit-render="{ autofocus: '.vxe-input--inner' }">
            <template #edit="{ row }">
              <vxe-input v-model="row.description" placeholder="描述" />
            </template>
          </vxe-column>
          <vxe-column title="操作" fixed="right" width="90" align="center">
            <template #default="{ row }">
              <vxe-button type="text" status="primary" icon="vxe-icon-edit" content="编辑" @click="rowDBClickSelect({ row })"></vxe-button>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <!-- dialog容器 -->
      <div class="dialog-box-panel" v-if="showIndex === 2">
        <Splitpanes :style="{ height: 'calc(100% - 232px - 1em)' }">
          <Pane size="18">
            <vxe-form ref="form" :data="newForm" title-width="80px" class-name="padding-right-xs" title-overflow>
              <vxe-form-item title="报告单元" span="24">
                <template #default="{ data }">
                  <vxe-input v-model="data.rptGroupName" disabled></vxe-input>
                </template>
              </vxe-form-item>
              <vxe-form-item title="编码" span="24" field="code">
                <template #default="{ data }">
                  <vxe-input v-model="data.code"></vxe-input>
                </template>
              </vxe-form-item>
              <vxe-form-item title="名称" span="24">
                <template #default="{ data }">
                  <vxe-input v-model="data.name"></vxe-input>
                </template>
              </vxe-form-item>
              <vxe-form-item title="顺序号" span="24">
                <template #default="{ data }">
                  <vxe-input v-model="data.sortCode"></vxe-input>
                </template>
              </vxe-form-item>
              <vxe-form-item title="病人信息栏宽度" span="24">
                <template #default="{ data }">
                  <span class="flex justify-start middle">
                    <vxe-input type="float" v-model="data.patsPanelSize"></vxe-input>
                  </span>
                </template>
              </vxe-form-item>
              <vxe-form-item title="检验结果栏宽度" span="24">
                <template #default="{ data }">
                  <span class="flex justify-start middle">
                    <vxe-input type="float" v-model="data.resultsPanelSize"></vxe-input>
                  </span>
                </template>
              </vxe-form-item>
              <vxe-form-item title="标本列表栏宽度" span="24">
                <template #default="{ data }">
                  <span class="flex justify-start middle">
                    <vxe-input type="float" v-model="data.workbenchPanelSize"></vxe-input>
                  </span>
                </template>
              </vxe-form-item>
              <vxe-form-item title="检验结果列表行高" span="24">
                <template #default="{ data }">
                  <span class="flex justify-start middle">
                    <vxe-input type="float" v-model="data.resultRowHeight"></vxe-input>
                  </span>
                </template>
              </vxe-form-item>
              <vxe-form-item title="标本列表行高" span="24">
                <template #default="{ data }">
                  <span class="flex justify-start middle">
                    <vxe-input type="float" v-model="data.wlRowHeight" :disabled="!data.isEnableWlHeight"></vxe-input>
                  </span>
                </template>
              </vxe-form-item>
              <vxe-form-item title="字体大小" span="24">
                 <template #default="{ data }">
                   <vxe-select v-model="data.fontSize" transfer>
                     <vxe-option v-for="item in fontList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
                   </vxe-select>
                 </template>
               </vxe-form-item>
              <vxe-form-item title="字体加粗" span="24">
                 <template #default="{ data }">
                   <vxe-select v-model="data.fontWeight" transfer>
                     <vxe-option v-for="item in fontWeightList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
                   </vxe-select>
                 </template>
               </vxe-form-item>
<!--              <vxe-form-item title="系统默认" span="24">-->
<!--                 <template #default="{ data }">-->
<!--                     <vxe-checkbox v-model="data.isDefault" :checked-value=1 :unchecked-value=0></vxe-checkbox>-->
<!--                 </template>-->
<!--               </vxe-form-item>-->
              <vxe-form-item title="描述" span="24">
                <template #default="{ data }">
                  <vxe-textarea v-model="data.description" resize="vertical" placeholder="自适应文本高度" :autosize="{ minRows: 2, maxRows: 8 }"></vxe-textarea>
                </template>
              </vxe-form-item>
            </vxe-form>
          </Pane>
          <Pane size="82">
            <el-tabs v-model="moduleActiveName" :tab-position="'left'" type="card" @tab-click="handleModuleClick">
              <el-tab-pane label="病人信息" name="patTab" class="tabs-panel-margin-left-sm">
                <vxe-toolbar perfect>
                  <template #buttons>
                    <vxe-input v-model="searchValue4PatSetting" placeholder="关键字查询" @keyup.enter.native="findWkltConfigPatSettings(newForm.id)">
                      <template #suffix>
                        <i class="vxe-icon-search my-green" @click="findWkltConfigPatSettings(newForm.id)"></i>
                      </template>
                    </vxe-input>
                    <vxe-button icon="vxe-icon-square-square" content="模板数据" @click="openValidatePswDlg"></vxe-button>
                    <vxe-button status="primary" icon="vxe-icon-save" class-name="text-cyan" content="保存" @click="saveWlConfigPatSetting"></vxe-button>
                    <vxe-radio-group class="margin-left-xs" v-model="patForm.isVisiable" :strict="false" @change="radioVisDisChange">
                      <vxe-radio-button :label="null" content="全部"></vxe-radio-button>
                      <vxe-radio-button :label="1" content="显示"></vxe-radio-button>
                      <vxe-radio-button :label="0" content="不显示"></vxe-radio-button>
                    </vxe-radio-group>
                    <vxe-radio-group v-model="patForm.isDisabled" :strict="false" @change="radioVisDisChange">
                      <vxe-radio-button :label="null" content="全部"></vxe-radio-button>
                      <vxe-radio-button :label="1" content="禁用"></vxe-radio-button>
                      <vxe-radio-button :label="0" content="不禁用"></vxe-radio-button>
                    </vxe-radio-group>
                  </template>
                </vxe-toolbar>
                <div class="padding-left-xs" :style="{
                    height: vxeModalHeight > 0 ? 'calc(' + vxeModalHeight + 'px - 36px - 40px - 28px - 40px)' : 'calc(100vh - 232px - 1em - 2em - 0.25em - 1.5em)'
                  }">
                  <vxe-table ref="vxeTable1" class="sortable-row-demo" v-loading="loadingObj.confPatLoading" show-header-overflow :data="tableList" border height="auto" auto-resize :row-config="{ isCurrent: true, isHover: true, useKey: true }" :mouse-config="{ selected: true }" :keyboard-config="{ isArrow: true, isTab: true, isEdit: true }" :edit-config="{
                      trigger: 'click',
                      mode: 'cell',
                      showIcon: false,
                      showStatus: true
                    }" :scroll-y="{ enabled: false }" resizable show-overflow>
                    <!-- <vxe-column type="checkbox" width="26"> </vxe-column> -->
                    <vxe-column width="30" align="center">
                      <template #default="{ row }">
                        <span class="drag-btn" :class="row.isChange ? 'sort-bg-color' : ''">
                          <i class="vxe-icon-sort"></i>
                        </span>
                      </template>
                      <template #header>
                        <vxe-tooltip v-model="showHelpTipPat" content="按住后可以上下拖动排序！" enterable>
                          <i class="vxe-icon-question-circle-fill" @click="showHelpTipPat = !showHelpTipPat"></i>
                        </vxe-tooltip>
                      </template>
                    </vxe-column>
                    <vxe-column type="seq" width="30" align="left"></vxe-column>
                    <vxe-column title="字段" width="130" align="left" field="fieldCode" show-overflow-tooltip>
                      <template #default="{ row }">
                        <span>{{ row.fieldCode }}</span>
                      </template>
                    </vxe-column>
                    <vxe-column title="字段名称" width="140" align="left" field="fieldName" show-overflow-tooltip :edit-render="{ autofocus: '.vxe-input--inner' }">
                      <template #edit="{ row }">
                        <vxe-input v-model="row.fieldName" type="text" clearable></vxe-input>
                      </template>
                    </vxe-column>
                    <vxe-column title="字段描述" width="120" align="left" field="fieldDescription" show-overflow-tooltip :edit-render="{ autofocus: '.vxe-input--inner' }">
                      <template #edit="{ row }">
                        <vxe-input v-model="row.fieldDescription" type="text" clearable></vxe-input>
                      </template>
                    </vxe-column>
                    <vxe-column title="顺序号" width="100" align="right" field="displayOrder" show-overflow-tooltip :edit-render="{ autofocus: '.vxe-input--inner' }">
                      <template #edit="{ row }">
                        <vxe-input v-model="row.displayOrder" type="text" clearable align="right"></vxe-input>
                      </template>
                    </vxe-column>
                    <vxe-column title="是否显示" width="90" align="center" field="isVisiable" show-overflow-tooltip>
                      <template #default="{ row }">
                        <vxe-checkbox v-model="row.isVisiable" :checked-value="1" :unchecked-value="0"></vxe-checkbox>
                      </template>
                    </vxe-column>
                    <vxe-column title="有条码号时是否允许编辑" width="100" align="center" field="isEditHasSpecCode" show-overflow-tooltip>
                      <template #default="{ row }">
                        <vxe-checkbox v-model="row.isEditHasSpecCode" :checked-value="1" :unchecked-value="0"></vxe-checkbox>
                      </template>
                    </vxe-column>
                    <vxe-column title="是否禁用" align="center" field="isDisabled" show-overflow-tooltip>
                      <template #default="{ row }">
                        <vxe-checkbox v-model="row.isDisabled" :checked-value="1" :unchecked-value="0"></vxe-checkbox>
                      </template>
                    </vxe-column>
                    <!--                    <vxe-column title="呈现组件" width="120" align="left" field="uiComponent" show-overflow-tooltip :edit-render="{ autofocus: '.vxe-input&#45;&#45;inner' }">
                      <template #edit="{ row }">
                        <vxe-select v-model="row.uiComponent" placeholder="呈现组件" clearable transfer>
                          <vxe-option v-for="num in enableUIComponents" :key="num" :value="num" :label="`${num}`"></vxe-option>
                        </vxe-select>
                      </template>
                    </vxe-column>
                    <vxe-column title="是否字典" width="90" align="center" field="isDict" show-overflow-tooltip>
                      <template #default="{ row }">
                        <vxe-checkbox v-model="row.isDict" :checked-value="1" :unchecked-value="0" @change="row.uiComponent=''"></vxe-checkbox>
                      </template>
                    </vxe-column>
                    <vxe-column title="字典code" width="120" align="left" field="dictCode" show-overflow-tooltip :edit-render="{ autofocus: '.vxe-input&#45;&#45;inner' }">
                      <template #edit="{ row }">
                        <vxe-input v-model="row.dictCode" type="text" clearable></vxe-input>
                      </template>
                    </vxe-column>
                    <vxe-column title="自定义组件属性" min-width="180" align="left" field="selfUiComppropsoBJ" show-overflow-tooltip :edit-render="{ autofocus: '.vxe-input&#45;&#45;inner' }">
                      <template #edit="{ row }">
                        <vxe-input v-model="row.selfUiComppropsoBJ" type="text" clearable></vxe-input>
                      </template>
                    </vxe-column>-->
                  </vxe-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="结果列表" name="resultTab">
                <vxe-toolbar perfect>
                  <template #buttons>
                    <vxe-button icon="vxe-icon-download" content="获取默认配置" @click="getResultDefaultConfig"></vxe-button>
                    <vxe-button content="选择插入" @click="selectInsert"></vxe-button>
                    <vxe-button status="primary" icon="vxe-icon-save" class-name="text-cyan" content="保存" @click="saveResultConfigList"></vxe-button>
                    <vxe-radio-group v-model="isVisiableResult" @change="configResultSearch" class="margin-left-xs">
                      <vxe-radio-button :label="null">全部</vxe-radio-button>
                      <vxe-radio-button :label="1">显示</vxe-radio-button>
                      <vxe-radio-button :label="0">不显示</vxe-radio-button>
                    </vxe-radio-group>
                  </template>
                </vxe-toolbar>
                <div class="padding-left-xs" :style="{
                    height: vxeModalHeight > 0 ? 'calc(' + vxeModalHeight + 'px - 36px - 40px - 28px - 40px)' : 'calc(100vh - 232px - 1em - 2em - 0.25em - 1.5em)'
                  }">
                  <vxe-table class="sortable-row-demo" ref="configResultTable" :data="conResultList" v-loading="loadingObj.confResultLoading" border height="auto" :row-config="{ isCurrent: true, isHover: true }" :mouse-config="{ selected: true }" :keyboard-config="{ isArrow: true, isTab: true, isEdit: true }" :edit-config="{
                      trigger: 'click',
                      mode: 'cell',
                      showIcon: false,
                      showStatus: true
                    }" :scroll-y="{ enabled: false }" resizable show-overflow>
                    <!--                    <vxe-column width="30" align="center">
                      <template #default="{ row }">
                        <span class="drag-btn" :class="row.isChange ? 'sort-bg-color' : ''">
                          <i class="vxe-icon-sort"></i>
                        </span>
                      </template>
                      <template #header>
                        <vxe-tooltip v-model="showResultHelpTip" content="按住后可以上下拖动排序！" enterable>
                          <i class="vxe-icon-question-circle-fill" @click="showResultHelpTip = !showResultHelpTip"></i>
                        </vxe-tooltip>
                      </template>
                    </vxe-column>-->
                    <vxe-column type="seq" title="序号" width="30"></vxe-column>
                    <vxe-column field="fieldCode" title="字段" width="160"></vxe-column>
                    <vxe-column field="fieldName" title="字段名称" width="160" :edit-render="{
                        autofocus: '.vxe-input--inner'
                      }">
                      <template #edit="{ row, rowIndex, column }">
                        <vxe-input v-model="row.fieldName" type="text" @keydown.native.enter="configEnterEvent(row, rowIndex, column)"></vxe-input>
                      </template>
                    </vxe-column>
                    <vxe-column field="fieldDescription" title="字段描述" width="160"></vxe-column>
                    <vxe-column field="columnWidth" title="列宽" width="80" :edit-render="{
                        autofocus: '.vxe-input--inner'
                      }">
                      <template #edit="{ row, rowIndex, column }">
                        <vxe-input v-model="row.columnWidth" type="number" @keydown.native.enter="configEnterEvent(row, rowIndex, column)"></vxe-input>
                      </template>
                    </vxe-column>
                    <vxe-column title="对齐方式" width="120" align="left" field="align" show-overflow-tooltip :edit-render="{ autofocus: '.vxe-input--inner' }">
                      <template #default="{ row }">{{ row.align === 'left' ? '左对齐' : row.align === 'center' ? '居中对齐' : '右对齐' }}</template>
                      <template #edit="{ row }">
                        <vxe-select v-model="row.align" placeholder="对齐方式" clearable transfer>
                          <vxe-option v-for="(item, index) in alignComponents" :key="index" :label="item.name" :value="item.code"></vxe-option>
                        </vxe-select>
                      </template>
                    </vxe-column>
                    <vxe-column field="isVisiable" title="是否显示" align="center" width="60">
                      <template #default="{ row }">
                        <vxe-checkbox v-model="row.isVisiable" :checked-value="1" :unchecked-value="0"></vxe-checkbox>
                      </template>
                    </vxe-column>
                    <vxe-column field="isFix" title="固定列" align="center" width="60">
                      <template #default="{ row }">
                        <vxe-checkbox v-model="row.isFix" :checked-value="1" :unchecked-value="0"></vxe-checkbox>
                      </template>
                    </vxe-column>
                    <vxe-column field="isSortable" title="排序列" align="center" width="60">
                      <template #default="{ row }">
                        <vxe-checkbox v-model="row.isSortable" :checked-value="1" :unchecked-value="0"></vxe-checkbox>
                      </template>
                    </vxe-column>
                    <vxe-column field="displayOrder" title="顺序号" min-width="80" :edit-render="{
                        autofocus: '.vxe-input--inner'
                      }">
                      <template #edit="{ row, rowIndex, column }">
                        <vxe-input v-model="row.displayOrder" type="text" @keydown.native.enter="configEnterEvent(row, rowIndex, column)"></vxe-input>
                      </template>
                    </vxe-column>
                  </vxe-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="标本列表" name="fieldTab">
                <vxe-toolbar perfect>
                  <template #buttons>
                    <vxe-button icon="vxe-icon-download" content="获取默认配置" @click="getDefaultConfig"></vxe-button>

                    <vxe-button status="primary" icon="vxe-icon-save" class-name="text-cyan" content="保存" @click="saveConfigList"></vxe-button>
                    <vxe-radio-group v-model="isVisiableField" @change="configSearch" class="margin-left-xs">
                      <vxe-radio-button :label="null">全部</vxe-radio-button>
                      <vxe-radio-button :label="1">显示</vxe-radio-button>
                      <vxe-radio-button :label="0">不显示</vxe-radio-button>
                    </vxe-radio-group>
                  </template>
                </vxe-toolbar>
                <div class="padding-left-xs" :style="{
                    height: vxeModalHeight > 0 ? 'calc(' + vxeModalHeight + 'px - 36px - 40px - 28px - 40px)' : 'calc(100vh - 232px - 1em - 2em - 0.25em - 1.5em)'
                  }">
                  <vxe-table class="sortable-row-demo" ref="configTable1" v-loading="loadingObj.confFieldLoading" border height="auto" :data="configList" :row-config="{ isCurrent: true, isHover: true }" :mouse-config="{ selected: true }" :keyboard-config="{ isArrow: true, isTab: true, isEdit: true }" :edit-config="{
                      trigger: 'click',
                      mode: 'cell',
                      showIcon: false,
                      showStatus: true
                    }" :scroll-y="{ enabled: false }" resizable show-overflow keep-source>
                    <!--                    <vxe-column width="30" align="center">
                      <template #default="{ row }">
                        <span class="drag-btn" :class="row.isChange ? 'sort-bg-color' : ''">
                          <i class="vxe-icon-sort"></i>
                        </span>
                      </template>
                      <template #header>
                        <vxe-tooltip v-model="showHelpTip" content="按住后可以上下拖动排序！" enterable>
                          <i class="vxe-icon-question-circle-fill" @click="showHelpTip = !showHelpTip"></i>
                        </vxe-tooltip>
                      </template>
                    </vxe-column>-->
                    <vxe-column type="seq" title="序号" width="30"></vxe-column>
                    <vxe-column field="fieldCode" title="字段" width="160"></vxe-column>
                    <vxe-column field="fieldName" title="字段名称" width="160" :edit-render="{
                        autofocus: '.vxe-input--inner'
                      }">
                      <template #edit="{ row, rowIndex, column }">
                        <vxe-input v-model="row.fieldName" type="text" @keydown.native.enter="configEnterEvent(row, rowIndex, column)"></vxe-input>
                      </template>
                    </vxe-column>
                    <vxe-column field="fieldDescription" title="字段描述" width="160"></vxe-column>
                    <vxe-column field="columnWidth" title="列宽" width="80" :edit-render="{
                        autofocus: '.vxe-input--inner'
                      }">
                      <template #edit="{ row, rowIndex, column }">
                        <vxe-input v-model="row.columnWidth" type="number" @keydown.native.enter="configEnterEvent(row, rowIndex, column)"></vxe-input>
                      </template>
                    </vxe-column>
                    <vxe-column title="对齐方式" width="120" align="left" field="align" show-overflow-tooltip :edit-render="{ autofocus: '.vxe-input--inner' }">
                      <template #default="{ row }">{{ row.align === 'left' ? '左对齐' : row.align === 'center' ? '居中对齐' : '右对齐' }}</template>
                      <template #edit="{ row }">
                        <vxe-select v-model="row.align" placeholder="对齐方式" clearable transfer>
                          <vxe-option v-for="(item, index) in alignComponents" :key="index" :label="item.name" :value="item.code"></vxe-option>
                          <!--
                          <vxe-option v-for="num in alignComponents" :key="num" :value="num" :label="`${num}`"></vxe-option>
-->
                        </vxe-select>
                      </template>
                    </vxe-column>
                    <vxe-column field="isVisiable" title="是否显示" align="center" width="60">
                      <template #default="{ row }">
                        <vxe-checkbox v-model="row.isVisiable" :checked-value="1" :unchecked-value="0"></vxe-checkbox>
                      </template>
                    </vxe-column>
                    <vxe-column field="isFix" title="固定列" align="center" width="60">
                      <template #default="{ row }">
                        <vxe-checkbox v-model="row.isFix" :checked-value="1" :unchecked-value="0"></vxe-checkbox>
                      </template>
                    </vxe-column>
                    <vxe-column field="isSortable" title="排序列" align="center" width="60">
                      <template #default="{ row }">
                        <vxe-checkbox v-model="row.isSortable" :checked-value="1" :unchecked-value="0"></vxe-checkbox>
                      </template>
                    </vxe-column>
                    <vxe-column field="displayOrder" title="顺序号" min-width="80" :edit-render="{
                        autofocus: '.vxe-input--inner'
                      }">
                      <template #edit="{ row, rowIndex, column }">
                        <vxe-input v-model="row.displayOrder" type="text" @keydown.native.enter="configEnterEvent(row, rowIndex, column)"></vxe-input>
                      </template>
                    </vxe-column>
                  </vxe-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="启用对象" name="ruleTab">
                <vxe-toolbar perfect>
                  <template #buttons>
                    <vxe-button status="primary" icon="vxe-icon-download" content="添加行" @click="addNewRuleLine"></vxe-button>
                    <vxe-button icon="vxe-icon-save" class-name="text-cyan" content="保存" @click="saveModifyRules"></vxe-button>
                    <vxe-button status="error" icon="vxe-icon-download" content="删除选中" @click="deleteSelections"></vxe-button>
                  </template>
                </vxe-toolbar>
                <div class="padding-left-xs" :style="{
                    height: vxeModalHeight > 0 ? 'calc(' + vxeModalHeight + 'px - 36px - 40px - 28px - 40px)' : 'calc(100vh - 232px - 1em - 2em - 0.25em - 1.5em)'
                  }">
                  <vxe-table class="sortable-row-demo" ref="configTable2" v-loading="loadingObj.confRuleLoading" border height="auto" :data="wlConfigRules" :row-config="{ isCurrent: true, isHover: true }" :mouse-config="{ selected: true }" :keyboard-config="{ isArrow: true, isTab: true, isEdit: true }" :edit-config="{
                      trigger: 'click',
                      mode: 'cell',
                      showIcon: false,
                      showStatus: true
                    }" resizable show-overflow keep-source>
                    <vxe-column type="checkbox" width="26"></vxe-column>
                    <vxe-column type="seq" title="序号" width="30"></vxe-column>
                    <vxe-column field="computer" title="电脑名称" width="160" :edit-render="{ autofocus: '.vxe-input--inner' }">
                      <template #edit="{ row, rowIndex, column }">
                        <vxe-input v-model="row.computer" type="text" @keydown.native.enter="configEnterEvent(row, rowIndex, column)"></vxe-input>
                      </template>
                    </vxe-column>
                    <vxe-column field="employee.name" title="适用人员" min-width="180" :edit-render="{ autofocus: '.vxe-input--inner' }">
                      <template #edit="{ row, rowIndex, column }">
                        <VxePulldownSelection :isChild="true" :childIndex="rowIndex" :ref="'configTable2' + rowIndex" :url="'/api/hrms/employees'" @confirmClick="(e) => pulldownSelectConfirmCategory(e, rowIndex, column)" :tableColumn="[
                            { field: 'code', title: '编码' },
                            { field: 'name', title: '名称' }
                          ]" :aimKeys="[
                            { targetField: 'employeeId', sourceField: 'id' },
                            { targetField: 'employee', sourceField: 'entity' }
                          ]" :displayTexts="['name']" :displayTextObj="row.employee ? row.employee.name : ''" />
                      </template>
                    </vxe-column>
                  </vxe-table>
                </div>
              </el-tab-pane>
            </el-tabs>
          </Pane>
        </Splitpanes>
      </div>
      <template #footer>
        <div class="dialog-footer" style="display: flex; justify-content: space-between">
          <div>
            <span>&nbsp;</span>
          </div>
          <div>
            <vxe-button content="取 消" @click="dialogClosed"></vxe-button>
            <vxe-button content="返 回" @click="goBackForwordPage" v-if="showIndex === 2"></vxe-button>
          </div>
        </div>
      </template>
    </vxe-modal>
    <vxe-modal v-model="copyConfirm" show-footer transfer>
      <template #default>
        <div>
          <vxe-checkbox v-model="isCopyDetail" content="是否复制明细" :checked-value="true" :unchecked-value="false"></vxe-checkbox>
        </div>
      </template>
      <template #footer>
        <div class="flex justify-end">
          <vxe-button content="关闭" @click="copyConfirm = false"></vxe-button>
          <vxe-button status="primary" content="确定"></vxe-button>
        </div>
      </template>
    </vxe-modal>
    <vxe-modal v-model="loadTempDataValidatePsw" show-footer destroy-on-close transfer>
      <template #default>
        <div class="margin-bottom">
          <span class="text-bold">请输入密码验证</span>
          <span class="margin-left-xs">(密码:ysdlis)</span>
        </div>
        <div>
          <vxe-input v-model="validatePsw" style="width: 100%" placeholder="请输入操作密码" type="password" clearable @keydown.enter.native="tempQucikImport"></vxe-input>
        </div>
      </template>
      <template #footer>
        <div class="flex justify-end">
          <vxe-button content="关闭" @click="loadTempDataValidatePsw = false"></vxe-button>
          <vxe-button status="primary" content="确定" @click="tempQucikImport"></vxe-button>
        </div>
      </template>
    </vxe-modal>
    <vxe-modal v-model="isShowSelBaseModel" width="55vw" show-footer destroy-on-close :mask="false">
      <template #default>
        <vxe-table ref="baseFieldDataRef" show-overflow auto-resize height="300" :data="baseFieldData" :row-config="{isCurrent:true}">
          <vxe-column type="checkbox" width="30"></vxe-column>
          <vxe-column type="seq" width="30"></vxe-column>
          <vxe-column field="fieldCode" title="字段名称"></vxe-column>
          <vxe-column field="fieldName" title="字段描述"></vxe-column>
          <vxe-column field="columnWidth" title="列宽"></vxe-column>
        </vxe-table>
      </template>
      <template #footer>
        <vxe-button @click="isShowSelBaseModel=false">关闭</vxe-button>
        <vxe-button status="primary" @click="confirmInsertSelDataEvent">确定</vxe-button>
      </template>
    </vxe-modal>
  </div>
</template>
<script lang="ts" setup>
import { IsEmpty, sortByField } from '@/utils/common';
import { defineExpose, getCurrentInstance, reactive, ref } from 'vue';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import { Pane, Splitpanes } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';
import { LabMainInfoFields } from '@/utils/LabMainInfoFields.ts';
import { LabMainInfoColumns } from '@/utils/LabMainInfoColumns';
import { LabMainInfoResultFields } from '@/utils/LabMainInfoResultField';
import Sortable from 'sortablejs';
import VxePulldownSelection from '@/components/VxePulldownSelection.vue';

let { proxy }: any = getCurrentInstance();
let mySortable = Sortable;

let props = defineProps({
  suitModule: { type: String, default: '1' } /**适用模块，1、普通检验  2、微生物 */
});
let baseFieldData = reactive(LabMainInfoResultFields());/**基础模板数据 */
let isShowSelBaseModel = ref(false);/**是否显示选择基础数据弹窗 */
defineExpose({
  wkltConfigData
});

// 接收父组件传值
function wkltConfigData(repData) {
  dialogVisible.value = repData.visible;
  formSetting.rptGroup = repData.rptGroup;
  formSetting.rptGroupName = repData.rptGroupName;
  openOtherConfigDialog();
  GetPatInfoTemp();
}

//#region  变量
const baseFieldDataRef = ref(null);/**中间结果列表字段列表对象 */
const copyConfirm = ref(false); //复制确认
const isCopyDetail = ref(true);
let showIndex: any = ref(1);
const isChange = ref(false);
const moduleActiveName = ref('patTab');
/**
 * @description
 * 加载模板数据 需要密码验证，不能随意加载，会重新把之前的数据删掉 并插入新的数据
 * */
const loadTempDataValidatePsw = ref(false);
const validatePsw = ref('');
const searchValue4PatSetting = ref('');
const formSetting = reactive({
  rptGroup: '',
  searchValue: '',
  rptGroupName: '',
  id: '' /*id*/,
  code: '' /*编码*/,
  name: '' /*名称*/,
  isVisiable: 0 /*是否显示*/,
  isDisabled: 0 /*是否禁用*/,
  displayOrder: '' /*顺序号*/,
  isDefault: 0 /*是否默认*/,
  isEnablePsetting: 0 /**/,
  patsPanelSize: 0.2 /*左栏宽度*/,
  isEnableRsetting: 0 /**/,
  resultsPanelSize: 0.35 /*中间宽度*/,
  isEnableWsetting: 0 /**/,
  workbenchPanelSize: 0.45 /*右栏宽度*/,
  wtId: null /*工作组Id*/,
  wt: { id: '', name: '' } as any /*工作组*/,
  isEnableRrHeight: 0 /**/,
  resultRowHeight: 24 /*右栏宽度*/,
  isEnableWlHeight: 0 /**/,
  wlRowHeight: 24 /*右栏宽度*/,
  description: '' /*描述*/,
  suitModule: '' /*描述*/
});
let newForm = reactive({
  rptGroup: '',
  searchValue: '',
  rptGroupName: '',
  id: '' /*id*/,
  code: '' /*编码*/,
  name: '' /*名称*/,
  isVisiable: 0 /*是否显示*/,
  isDisabled: 0 /*是否禁用*/,
  displayOrder: '' /*顺序号*/,
  isDefault: 0 /*是否默认*/,
  isEnablePsetting: 0 /**/,
  patsPanelSize: 0.2 /*左栏宽度*/,
  isEnableRsetting: 0 /**/,
  resultsPanelSize: 0.35 /*中间宽度*/,
  isEnableWsetting: 0 /**/,
  workbenchPanelSize: 0.45 /*右栏宽度*/,
  wtId: null /*工作组Id*/,
  wt: { id: '', name: '' } as any /*工作组*/,
  isEnableRrHeight: 0 /**/,
  resultRowHeight: 24 /*右栏宽度*/,
  isEnableWlHeight: 0 /**/,
  wlRowHeight: 24 /*右栏宽度*/,
  description: '' /*描述*/,
  suitModule: '' /*描述*/
});
let patForm = reactive({
  isVisiable: null /*是否显示*/,
  isDisabled: null /*是否显示*/
});
const loading = ref(false);
const loadingObj = reactive({
  configListLoding: false,
  confPatLoading: false,
  configItemLoading: false,
  confResultLoading: false,
  confFieldLoading: false,
  confRuleLoading: false
});
let tableList = reactive([]);
let tableListConfigs = reactive([]);
const dialogVisible = ref(false);
const IsSubmt = ref(false);
const curEditRow = ref({});
const paneSize = ref(50);
const vxeModalHeight = ref(0);
const sexBaseData = ref([
  { label: '', value: null },
  { label: '男', value: 'Male' },
  { label: '女', value: 'Female' }
]);
const enableUIComponents = ref(['', 'input', 'textarea', 'radiogroup', 'checkboxgroup', 'switch', 'datepicker', 'inputnumber', 'select', 'popoverselection', 'agecomp']);
const alignComponents = reactive([
  {
    code: 'left',
    name: '左对齐'
  },
  {
    code: 'center',
    name: '居中对齐'
  },
  {
    code: 'right',
    name: '右对齐'
  }
]);
const visibleUIComponent = ref(false);
const fontList = ref([
  { label: '小', value: 'small' },
  { label: '中', value: 'medium' },
  { label: '大', value: 'big' }
]);
const fontWeightList = ref([
  { label: '100', value: '100' },
  { label: '200', value: '200' },
  { label: '300', value: '300' },
  { label: '400', value: '400' },
  { label: '500', value: '500' },
  { label: '600', value: '600' },
  { label: '700', value: '700' },
  { label: '800', value: '800' },
  { label: '900', value: '900' }
]);
//#endregion

function mounted() {
  if (!IsEmpty(this.Wt.WtId)) {
    this.openOtherConfigDialog();
  }
}
//获取列表
function findList() {
  if (IsEmpty(props.suitModule)) {
    this.$alert('适用模块没有值', '提示');
    return;
  }
  loading.value = true;
  const url = '';
  const data = {
    filter: IsEmpty(formSetting.searchValue) ? null : formSetting.searchValue,
    sorting: null,
    suitModule: props.suitModule
  };
}
//提交保存
function submit() {
  loading.value = true;
  IsSubmt.value = false;
  const url = '/api/lims/work-list-config/' + this.form.id;
}

//!窗体大小改变
function vxwModalSizeChange(t, e) {
  vxeModalHeight.value = (proxy.$refs.vxeModal as any).getBox().offsetHeight;
}
function openValidatePswDlg() {
  validatePsw.value = '';
  loadTempDataValidatePsw.value = true;
}
//模板快速插入
function tempQucikImport() {
  if (validatePsw.value !== 'ysdlis') {
    proxy.$XModal.message({ content: '密码不正确', status: 'error' });
    return;
  }
  if (IsEmpty(newForm.id)) {
    proxy.$XModal.message({ content: '请先保存左侧信息', status: 'warning' });
    return;
  }
  validatePsw.value = '';
  loadTempDataValidatePsw.value = false;
  loadingObj.confPatLoading = true;
  const arr = Object.assign([], patInfoTempArr) as any[];
  for (let index = 0; index < arr.length; index++) {
    let element = arr[index];
    const aref = 'wlConfigId';
    if (element) {
      element[aref] = newForm.id;
    }
  }
  const url = '/lab/wlConfigPatsetting/insertPatsettingByTemp';
  proxy.$http
    .post(url, arr)
    .then((res: any) => {
      loadingObj.confPatLoading = false;
      tableList.length = 0;
      tableList.push(...res.data);
      proxy.$XModal.message({ content: '插入成功', status: 'success' });
    })
    .catch((err: any) => {
      loadingObj.confPatLoading = false;
      proxy.$XModal.message({ content: '保存失败' + err.data.error.message, status: 'error' });
    });
}
//查询工作组病人信息配置列表
function findWkltConfigPatSettings(id) {
  tableList.length = 0;
  loadingObj.confPatLoading = true;
  const url = '/lab/wlConfigPatsetting/findPatsettingByConfigId';
  const data = {
    wLConfigId: id,
    isVisiable: IsEmpty(patForm.isVisiable) ? null : patForm.isVisiable,
    isDisabled: IsEmpty(patForm.isDisabled) ? null : patForm.isDisabled,
    filter: IsEmpty(searchValue4PatSetting) ? null : searchValue4PatSetting.value
  };
  proxy.$http
    .get(url, { params: data })
    .then((res: any) => {
      tableList.push(...sortByField(res.data, 'displayOrder'));
      loadingObj.confPatLoading = false;
      rowDropPat();
    })
    .catch((err: any) => {
      loadingObj.confPatLoading = false;
      proxy.$alert(err, '提示');
    });
}
//保存病人信息顺序
function saveWlConfigPatSetting() {
  loadingObj.confPatLoading = true;
  const url = '/lab/wlConfigPatsetting/insertOrUpdatePatsetting';
  proxy.$http
    .post(url, tableList)
    .then((res: any) => {
      proxy.$XModal.message({ content: '保存成功', status: 'success' });
      findWkltConfigPatSettings(newForm.id);
      loadingObj.confPatLoading = false;
      rowDropPat();
    })
    .catch((err: any) => {
      loadingObj.confPatLoading = false;
      proxy.$XModal.message({ content: '保存失败' + err.data.error.message, status: 'error' });
    });
}

//插入种子数据
function insertBaseData(row) {
  switch (row.fieldCode.toUpperCase()) {
    case 'SEX':
      row.uiComponentResources = JSON.stringify(sexBaseData.value);
      break;
    case 'RACE':
      const arr = [
        { label: '黄种人', value: '黄种人' },
        { label: '白种人', value: '白种人' },
        { label: '黑种人', value: '黑种人' }
      ];
      row.uiComponentResources = JSON.stringify(arr);
      break;
    default:
      row.uiComponentResources = '[]';
      break;
  }
}
//新增配置
function addNewWlConfig() {
  const item = {
    rptGroup: formSetting.rptGroup,
    rptGroupName: formSetting.rptGroupName,
    id: '' /*id*/,
    code: '' /*编码*/,
    name: '' /*名称*/,
    displayOrder: '' /*顺序号*/,
    isDefault: 0 /*是否默认*/,
    isEnablePsetting: 0 /**/,
    patsPanelSize: 0.2 /*左栏宽度*/,
    isEnableRsetting: 0 /**/,
    resultsPanelSize: 0.35 /*中间宽度*/,
    isEnableWsetting: 0 /**/,
    workbenchPanelSize: 0.45 /*右栏宽度*/,
    isEnableRrHeight: 0 /**/,
    resultRowHeight: 24 /*右栏宽度*/,
    isEnableWlHeight: 0 /**/,
    wlRowHeight: 24 /*右栏宽度*/,
    description: '' /*描述*/,
    suitModule: props.suitModule /*描述*/
  };
  tableListConfigs.push(item);
  const $xTable = proxy.$refs.wlConfigComp as any;
  $xTable.setEditRow(item);
  setTimeout(() => {
    $xTable.scrollToRow(item);
  }, 50);
}
let editWlConfigStatus = ref(false); //是否编辑
//保存工作列表配置
function saveWlConfig() {
  editWlConfigStatus.value = true;
  const url = '/lab/wlConfig/insertOrUpdateConfigsting';
  proxy.$http
    .post(url, tableListConfigs)
    .then((res: any) => {
      proxy.$XModal.message({ content: '保存成功', status: 'success' });
      openOtherConfigDialog();
    })
    .catch((err: any) => {
      proxy.$XModal.message({ content: '保存失败', status: 'error' });
    });
}
//设置默认
function setDefaultWlConfig() {
  const $xTable = proxy.$refs.wlConfigComp as any;
  const selCols = $xTable.getCheckboxRecords();
  if (selCols && selCols.length > 1) {
    proxy.$XModal.message({ content: '系统默认只能有一条数据', status: 'warning' });
    return;
  }
  if (selCols && selCols.length <= 0) {
    proxy.$XModal.message({ content: '系统默认只能有一条数据', status: 'warning' });
    return;
  }
  const arrNews = tableListConfigs.filter((obj) => {
    return IsEmpty(obj.id);
  });
  if (arrNews.length > 0) {
    proxy.$XModal.message({ content: '请先保存新增数据后再设置默认', status: 'warning' });
    return;
  }
  tableListConfigs.forEach((itm, idx) => {
    if (itm.id === selCols[0].id) {
      itm.rptGroup = '';
      itm.rptGroupName = '';
      itm.isDefault = 1;
    } else {
      itm.isDefault = 0;
    }
  });
  saveWlConfig();
}
//编辑工作列表配置
function editWlConfig() { }
//复制工作列表配置
function copyWlConfig() {
  const $xTable = proxy.$refs.wlConfigComp as any;
  const selectRows = $xTable.getCheckboxRecords();
  if (selectRows.length !== 1) {
    proxy.$XModal.message({ content: '请选中一条进行复制', status: 'warning' });
    return;
  }
  copyConfirm.value = true;
}
//粘贴工作列表配置
function pasteWlConfig() { }
//删除工作列表配置
function deleteWlConfig() {
  const $xTable = proxy.$refs.wlConfigComp as any;
  let selectRows = $xTable.getCheckboxRecords();
  if (selectRows.length <= 0) {
    proxy.$XModal.message({ content: '请先选中要删除的项', status: 'warning' });
    return;
  }
  selectRows = selectRows.filter((e: any) => {
    return e.isDefault !== 1;
  });
  proxy.$XModal.confirm('您确定要删除吗？').then((type) => {
    if (type === 'confirm') {
      const url = '/lab/wlConfig/batchDeleteConfigsting';
      proxy.$http
        .post(url, selectRows)
        .then((res: any) => {
          proxy.$XModal.message({ content: '删除成功', status: 'success' });
          openOtherConfigDialog();
        })
        .catch((err: any) => {
          proxy.$XModal.message({ content: '删除失败' + err.data.error.message, status: 'error' });
        });
    }
  });
}
//打开选择其他配置
function openOtherConfigDialog() {
  if (IsEmpty(formSetting.rptGroup)) {
    VxeMessage('报告单元没有值', VxeNotifyType.error);
  }
  tableListConfigs.length = 0;
  loadingObj.configListLoding = true;
  const url = '/lab/wlConfig/findWlConfig';
  const data = {
    filter: IsEmpty(formSetting.searchValue) ? null : formSetting.searchValue,
    suitModule: props.suitModule,
    rptGroup: formSetting.rptGroup
  };
  proxy.$http
    .get(url, { params: data })
    .then((res: any) => {
      tableListConfigs.push(...res.data);
      loadingObj.configListLoding = false;
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
      loadingObj.configListLoding = false;
    });
}
//返回
function goBackForwordPage() {
  showIndex.value = 1;
}
//配置项列表双击选中
function rowDBClickSelect({ row }) {
  if (row.id === '' || row.id === null) {
    VxeMessage('请先保存数据', VxeNotifyType.error);
    return;
  }
  newForm = row;
  showIndex.value = 2;
  findWkltConfigPatSettings(row.id); //病人信息
  loadResultSetting(row.id); //结果列表
  loadFieldSetting(row.id); //标本列表
  loadRuleSetting(row.id); //启用对象
}
//页签选择改变
function handleModuleClick(tab, event) {
  switch (tab.props.name) {
    case 'patTab':
      findWkltConfigPatSettings(newForm.id);
      break;
    case 'resultTab':
      loadResultSetting(newForm.id);
      break;
    case 'fieldTab':
      loadFieldSetting(newForm.id);
      break;
    case 'ruleTab':
      loadRuleSetting(newForm.id);
      break;
    default:
      break;
  }
}

const showResultHelpTip = ref(false);
let conResultList = reactive([]);
const isVisiableResult = ref(null);

//结果列表
function loadResultSetting(id) {
  conResultList.length = 0;
  loadingObj.confResultLoading = true;
  const url = '/lab/wlConfigResultssetting/findResultstingByConfigId';
  const data = {
    wLConfigId: id,
    isVisiable: IsEmpty(isVisiableResult.value) ? null : isVisiableResult.value
  };
  proxy.$http
    .get(url, { params: data })
    .then((res: any) => {
      conResultList.push(...res.data);
      loadingObj.confResultLoading = false;
      rowResultDrop();
    })
    .catch((err: any) => {
      loadingObj.confResultLoading = false;
      proxy.$alert(err, '提示');
    });
}
const isVisiableField = ref(null);
//加载列宽顺序
function loadFieldSetting(id) {
  configList.length = 0;
  loadingObj.confFieldLoading = true;
  const url = '/lab/wlConfigFieldssetting/findFieldssettingByConfigId';
  const data = {
    wLConfigId: id,
    isVisiable: isVisiableField.value
  };
  proxy.$http
    .get(url, { params: data })
    .then((res: any) => {
      configList.push(...res.data);
      rowDrop();
      loadingObj.confFieldLoading = false;
    })
    .catch((err: any) => {
      loadingObj.confFieldLoading = false;
      proxy.$alert(err, '提示');
    });
}
//加载启用对象
function loadRuleSetting(id) {
  wlConfigRules.length = 0;
  loadingObj.confRuleLoading = true;
  const url = '/lab/wlConfigRulessetting/findRulessettingByConfigId';
  const data = {
    wLConfigId: id
  };
  proxy.$http
    .get(url, { params: data })
    .then((res: any) => {
      wlConfigRules.push(...res.data);
      loadingObj.confRuleLoading = false;
    })
    .catch((err: any) => {
      loadingObj.confRuleLoading = false;
      proxy.$alert(err, '提示');
    });
}
//是否显示，是否禁用选择改变
function radioVisDisChange() {
  findWkltConfigPatSettings(newForm.id);
}
//弹窗打开后触发
function DislogOpened() {
  isChange.value = false;
}
//窗体关闭触发
function dialogClosed() {
  dialogVisible.value = false;
  showIndex.value = 1;
  if (editWlConfigStatus.value) {
    editWlConfigStatus.value = false;
    proxy.$emit('refreshFields', true);
  }
}
let sortablePat = ref(null);
let showHelpTipPat = ref(false);
function rowDropPat() {
  proxy.$nextTick(() => {
    const xTable = proxy.$refs.vxeTable1 as any;
    mySortable = Sortable.create(xTable.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
      handle: '.drag-btn',
      onEnd: ({ newIndex, oldIndex }) => {
        // 顺序号调整
        const temp = tableList[newIndex].displayOrder;
        if (newIndex > oldIndex) {
          for (let i = newIndex; i > oldIndex; i--) {
            tableList[i].displayOrder = tableList[i - 1].displayOrder;
            tableList[i].isChange = true; //标记改变的行
          }
        } else if (oldIndex > newIndex) {
          for (let i = newIndex; i < oldIndex; i++) {
            tableList[i].displayOrder = tableList[i + 1].displayOrder;
            tableList[i].isChange = true;
          }
        }
        tableList[oldIndex].isChange = true;
        tableList[oldIndex].displayOrder = temp;

        // 拖拽后数据改变了，列表无效果的问题解决方法
        const newTable = tableList;
        proxy.$nextTick(() => {
          proxy.tableList = newTable;
        });
      }
    });
  });
}
//#endregion

//#region  字典模板
//病人信息模板
let patInfoTempArr = reactive([]);
function GetPatInfoTemp() {
  patInfoTempArr = reactive(LabMainInfoFields());
}
//#endregion

//#region  列宽顺序
const showHelpTip = ref(false);
let configList = reactive([]);

let configResultTable: any = ref(null); //报告结果传值
// 获取检验结果字段默认配置
function getResultDefaultConfig() {
  const arr = LabMainInfoResultFields();
  arr.forEach((item) => {
    item.isChange = false; //是否修改
    item.wlConfigId = newForm.id;
  });
  if (conResultList.length > 0) {
    conResultList.forEach((itm) => {
      const ele = arr.filter((data) => itm.fieldCode === data.fieldCode);
      if (ele && ele.length > 0) {
        for (const key in ele[0]) {
          if (Object.prototype.hasOwnProperty.call(ele[0], key)) {
            const element = ele[0][key];
            itm[key] = element;
          }
        }
      }
    });
    let arrList = [];
    arr.forEach((itm) => {
      const ele = conResultList.filter((data) => itm.fieldCode === data.fieldCode);
      if (ele && ele.length > 0) {
        //has
      } else {
        arrList.push(itm);
      }
    });
    arrList.forEach((itm) => {
      conResultList.push(itm);
    });
  } else {
    conResultList = arr;
  }
  saveResultConfigList();
}

// 获取默认配置
function getDefaultConfig() {
  const arr = LabMainInfoColumns();
  arr.forEach((item) => {
    item.isChange = false; //是否修改
    item.wlConfigId = newForm.id;
  });
  if (configList.length > 0) {
    configList.forEach((itm) => {
      const ele = arr.filter((data) => itm.fieldCode === data.fieldCode);
      if (ele && ele.length > 0) {
        for (const key in ele[0]) {
          if (Object.prototype.hasOwnProperty.call(ele[0], key)) {
            const element = ele[0][key];
            itm[key] = element;
          }
        }
      }
    });
    let arrList = [];
    arr.forEach((itm) => {
      const ele = configList.filter((data) => itm.fieldCode === data.fieldCode);
      if (ele && ele.length > 0) {
        //has
      } else {
        arrList.push(itm);
      }
    });
    arrList.forEach((itm) => {
      configList.push(itm);
    });
  } else {
    configList = arr;
  }
  saveConfigList();
}
function configResultSearch() {
  loadResultSetting(newForm.id);
}
function configSearch() {
  loadFieldSetting(newForm.id);
}

function saveResultConfigList() {
  loadingObj.confResultLoading = true;
  const conResultRequestList = conResultList;
  const url = '/lab/wlConfigResultssetting/insertOrUpdateResultsting';
  proxy.$http
    .post(url, conResultRequestList)
    .then((res: any) => {
      proxy.$XModal.message({ content: '保存成功', status: 'success' });
      loadResultSetting(newForm.id);
      loadingObj.confResultLoading = false;
    })
    .catch((err: any) => {
      loadingObj.confResultLoading = false;
      proxy.$XModal.message({ content: '保存失败' + err.data.error.message, status: 'error' });
    });
}
function saveConfigList() {
  loadingObj.confFieldLoading = true;
  const url = '/lab/wlConfigFieldssetting/savaOrUpdateFieldssetting';
  proxy.$http
    .post(url, configList)
    .then((res: any) => {
      proxy.$XModal.message({ content: '保存成功', status: 'success' });
      loadFieldSetting(newForm.id);
      loadingObj.confFieldLoading = false;
    })
    .catch((err: any) => {
      loadingObj.confFieldLoading = false;
      proxy.$XModal.message({ content: '保存失败' + err.data.error.message, status: 'error' });
    });
}
let sortable = ref(null);
let sortResultable = ref(null);
let showHelpTip1 = ref(false);

function rowResultDrop() {
  proxy.$nextTick(() => {
    const xTable = proxy.$refs.configResultTable as any;
    const sortResultable: Sortable = Sortable.create(xTable.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
      handle: '.drag-btn',
      onEnd: ({ newIndex, oldIndex }) => {
        // 顺序号调整
        const temp = conResultList[newIndex].displayOrder;
        if (newIndex > oldIndex) {
          for (let i = newIndex; i > oldIndex; i--) {
            conResultList[i].displayOrder = conResultList[i - 1].displayOrder;
            conResultList[i].isChange = true; //标记改变的行
          }
        } else if (oldIndex > newIndex) {
          for (let i = newIndex; i < oldIndex; i++) {
            conResultList[i].displayOrder = conResultList[i + 1].displayOrder;
            conResultList[i].isChange = true;
          }
        }
        conResultList[oldIndex].isChange = true;
        conResultList[oldIndex].displayOrder = temp;

        // 拖拽后数据改变了，列表无效果的问题解决方法
        const newTable = conResultList;
        proxy.$nextTick(() => {
          proxy.conResultList = newTable;
        });
      }
    });
  });
}
function rowDrop() {
  proxy.$nextTick(() => {
    const xTable = proxy.$refs.configTable1 as any;
    const sortable: Sortable = Sortable.create(xTable.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
      handle: '.drag-btn',
      onEnd: ({ newIndex, oldIndex }) => {
        // 顺序号调整
        const temp = configList[newIndex].displayOrder;
        if (newIndex > oldIndex) {
          for (let i = newIndex; i > oldIndex; i--) {
            configList[i].displayOrder = configList[i - 1].displayOrder;
            configList[i].isChange = true; //标记改变的行
          }
        } else if (oldIndex > newIndex) {
          for (let i = newIndex; i < oldIndex; i++) {
            configList[i].displayOrder = configList[i + 1].displayOrder;
            configList[i].isChange = true;
          }
        }
        configList[oldIndex].isChange = true;
        configList[oldIndex].displayOrder = temp;

        // 拖拽后数据改变了，列表无效果的问题解决方法
        const newTable = configList;
        proxy.$nextTick(() => {
          proxy.configList = newTable;
        });
      }
    });
  });
}
//#endregion

//#region  启用对象 适用规则
const wlConfigRules = reactive([]);
function addNewRuleLine() {
  const row = {
    wlConfigId: newForm.id,
    computer: '',
    employeeId: '',
    employee: { id: '', name: '' }
  };
  wlConfigRules.push(row);
  (proxy.$refs.configTable2 as any).setEditRow(row);
}
//删除适用对象
function deleteSelections() {
  const $xTable = proxy.$refs.configTable2 as any;
  const selectRows = $xTable.getCheckboxRecords();
  if (selectRows.length <= 0) {
    proxy.$XModal.message({ content: '请先选中要删除的项', status: 'warning' });
    return;
  }
  proxy.$XModal.confirm('您确定要删除吗？').then((type) => {
    if (type === 'confirm') {
      selectRows.forEach((item, idx) => {
        const url = '/api/lims/wl-config-rules-setting/' + item.id;
        /*    this.axios
              .delete(url)
              .then((res: any) => {
                if (idx === selectRows.length - 1) {
                  (this as any).$XModal.message({ content: '删除成功', status: 'success' });
                  this.loadRuleSetting(this.newForm.id);
                }
              })
              .catch(err => {
                (this as any).$XModal.message({ content: '删除' + item.name + '时出现异常', status: 'error' });
              });*/
      });
    }
  });
}
//保存适用对象
function saveModifyRules() {
  loadingObj.confRuleLoading = true;
  const arrNews = wlConfigRules.filter((obj) => {
    return IsEmpty(obj.id);
  });
  const arrModifies = wlConfigRules.filter((obj) => {
    return !IsEmpty(obj.id);
  });
  arrNews.forEach((item: any, idx) => {
    const url = '/api/lims/wl-config-rules-setting';
    const data = item;
    /*   this.axios
         .post(url, data)
         .then((res: any) => {
           if (arrModifies.length <= 0 && idx === arrNews.length - 1) {
             (this as any).$XModal.message({ content: '保存成功', status: 'success' });
             this.loadRuleSetting(this.newForm.id);
             this.loadingObj.confRuleLoading = false;
           }
         })
         .catch(err => {
           if (arrModifies.length <= 0 && idx === arrNews.length - 1) {
             (this as any).$XModal.message({ content: '保存失败', status: 'error' });
             this.loadingObj.confRuleLoading = false;
           }
         });*/
  });
  arrModifies.forEach((item, idx) => {
    const url = '/api/lims/wl-config-rules-setting/' + item.id;
    const data = item;
    /*    this.axios
          .put(url, data)
          .then((res: any) => {
            if (idx === arrModifies.length - 1) {
              (this as any).$XModal.message({ content: '保存成功', status: 'success' });
              this.loadRuleSetting(this.newForm.id);
              this.loadingObj.confRuleLoading = false;
            }
          })
          .catch(err => {
            if (idx === arrModifies.length - 1) {
              (this as any).$XModal.message({ content: '保存失败', status: 'error' });
              this.loadingObj.confRuleLoading = false;
            }
          });*/
  });
}
//Pulldown下拉选中事件【指标类别】
function pulldownSelectConfirmCategory(e, rowIndex, column) {
  if (e.isChild) {
    e.aimKeys.forEach((item) => {
      wlConfigRules[e.childIndex][item.targetField] = e.row[item.sourceField];
    });
    //enterEvent(this.wlConfigRules[e.childIndex], rowIndex, column)
  } else {
    e.aimKeys.forEach((item) => {
      //creditClaimList[e.childIndex][item.targetField] = e.row[item.sourceField];
    });
  }
}
function configEnterEvent(row, rowIndex, column) {
  enterEvent(row, rowIndex, column);
}
// 回车切换输入框焦点
function enterEvent(row, rowIndex, column) {
  const $table = proxy.$refs.configTable2 as any;
  const fieldArr = Object.keys($table.fullColumnFieldData);
  let index = fieldArr.indexOf(column.field);
  let $rowIndex = rowIndex;
  // 当前为最后一单元格
  if (index === fieldArr.length - 1) {
    // 最后一行的最后一个单元格，取消切换
    if (rowIndex === wlConfigRules.length - 1) {
      addNewRuleLine();
      return;
    } else {
      // 跳转到下一行的第一个单元格
      $rowIndex++;
      index = 0;
    }
  } else {
    // 跳转到下一个单元格
    index++;
    // 如果跳转的单元格 field 为 isStatic (是否静态), 继续往下一个单元格跳转
    if (fieldArr[index] === 'isAudited') {
      index++;
    }
  }

  const newData = wlConfigRules[$rowIndex];
  if (!IsEmpty(row.employeeId)) {
    $table.setEditCell(newData, fieldArr[index]);
  } else {
    proxy.$XModal.message({ content: '请选择指标业务类型', status: 'error' });
    $table.setEditCell(newData, 'qiBusTypeName');
  }
  proxy.$nextTick(() => {
    setTimeout(() => {
      // 如果有滚动条，滚动到对应的行或列
      $table.scrollToRow(newData);
      $table.scrollToColumn(fieldArr[index]);
    }, 50);
  });
}
//#endregion

/**选择个别字段插入 */
function selectInsert() {
  isShowSelBaseModel.value = true;
}
/**确定插入选择的数据 */
function confirmInsertSelDataEvent() {
  const rows = baseFieldDataRef.value?.getCheckboxRecords();
  if (rows.length <= 0) {
    return;
  }
  let arr = [];
  rows.forEach(m1 => {
    const a1 = conResultList.filter(p => p.fieldCode === m1.fieldCode);
    if (a1 && a1.length > 0) {
      //todo
    } else {
      arr.push(m1);
    }
  });
  if (arr && arr.length <= 0) {
    return;
  }
  const url = '/lab/wlConfigResultssetting/insertOrUpdateResultsting';
  proxy.$http
    .post(url, arr)
    .then((res: any) => {
      proxy.$XModal.message({ content: '保存成功', status: 'success' });
      loadResultSetting(newForm.id);
    })
    .catch((err: any) => {
      proxy.$XModal.message({ content: '保存失败' + err.data.error.message, status: 'error' });
    });
}
/**数据类型显示文本 */
function formatCommon(arr, value) {
  for (const item of arr) {
    if (item.value == value) {
      return item.label;
    }
  }
}
</script>
<style lang="scss" scoped>
#wlconfig {
  .tool {
    margin: 10px 15px;
    .el-row {
      .tool-left,
      .tool-right {
        //   background-color: bg-white;
      }
      .el-form-item {
        margin-top: 10px;
        margin-bottom: 10px;
      }
    }
  }
  .el-divider--vertical {
    height: 20px;
  }
}
.tools-margin-bottom-sm {
  margin-bottom: 0.25em;
}
.tabs-panel-margin-left-sm {
  margin-left: 0.12em;
}
.margin-left-small {
  margin-left: 0.5em;
}

.margin-left-mini {
  margin-left: 0.12em;
}

.margin-top-large {
  margin-top: 2em;
}

.margin-right-small {
  margin-right: 00.5em;
}

.dialog-box-panel {
  position: relative;
}
.dialog-drawer-box-mask {
  z-index: 999999;
  position: absolute;
  width: 85vw;
  top: 0;
  left: 0;
  height: calc(100vh - 232px - 1em - 20px);
  background-color: rgba($color: #000000, $alpha: 0.5);
}
.dialog-drawer-box {
  // position: Verdana, absolute;
  height: calc(100vh - 232px - 1em);
  width: calc(85vw - 200px);
  right: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
  align-content: flex-start;
  align-items: flex-start;
}

.list-item {
  width: 100%;
  height: 2em;
  margin-top: 0.25em;
  border: 0.1px solid #eee;
  border-radius: 0.35em;
  padding: 0.25em;
  display: flex;
  justify-content: flex-start;
  cursor: pointer;
}

.list-item p:first-child {
  font-size: 0.15em;
  font-weight: 550;
}

:deep(.work-list-import-ref) {
  margin: 0;
}
:deep(.el-dialog__body) {
  margin: 0;
  height: 75vh !important;
  padding: 0.5em 0.5em 0.25em !important;
}
:deep(.el-upload-dragger) {
  width: calc(85vw - 1em) !important;
}
:deep(.el-form-item.el-form-item, .el-form-item--small.el-form-item) {
  margin-bottom: 0.2em;
}
:deep(.el-form-item--medium.el-form-item, .el-form-item--small.el-form-item) {
  margin-bottom: 0.2em;
}

:deep(.el-form-item.el-form-item, .el-form-item.el-form-item) {
  margin-bottom: 0.2em;
}
.validate-yes {
  z-index: 99;
  width: 100px;
  height: 100px;
  position: absolute;
  left: calc((80vw - 100px) / 2);
  top: calc((75vh - 100px) / 2);
  // background-image: url('../assets/images/validateyes.png');
  background-size: cover;
  opacity: 0.5;
}
</style>
